<template>
  <div class="detail-dialog-container">
    <div class="detail-dialog channelCover">
      <el-dialog :visible.sync="visible"
           width="100%" top="8vh"
           @close="$emit('update:showdialog', false)">
        <div slot="title" class="titleFont ">
          <el-tabs  v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="销售情况" name="first" v-if="activeName != 'online'">
            </el-tab-pane>
            <el-tab-pane label="销售情况" name="online" v-if="activeName == 'online'">
            </el-tab-pane>
            <el-tab-pane label="商圈分析" name="second" v-if="!online">
            </el-tab-pane>
            <el-tab-pane label="客流分析" name="third" v-if="!online">
            </el-tab-pane>
            <el-tab-pane label="经销商详情" name="fourth" v-if="!online">
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="channelContent">
          <saleDetailOnline :channelId="channelId" v-if="activeName == 'online'"></saleDetailOnline>
          <saleDetail :channelId="channelId" v-if="activeName == 'first'"></saleDetail>
          <areaAnalysis :address="address" v-if="activeName == 'second'"></areaAnalysis>
          <personAnalysis :channelId="channelId" v-if="activeName == 'third'"></personAnalysis>
          <dealerDetail :channelId="channelId" v-if="activeName == 'fourth'"></dealerDetail>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import areaAnalysis from './areaAnalysis'
  import dealerDetail from './dealerDetail'
  import personAnalysis from './personAnalysis'
  import saleDetail from './saleDetail'
  import saleDetailOnline from './saleDetailOnline'

  import {mapActions, mapMutations} from 'vuex'
  import * as opreate from 'api/getData'

  export default {
      name: "detail-dialog",
      components:{
        saleDetail,
        personAnalysis,
        dealerDetail,
        areaAnalysis,
        saleDetailOnline
      },
      props:{
        showdialog: {
          type: Boolean,
          default: false
        },
        channelId:{
          type:String,
          default:''
        },
        online:{
          type:String
        },
        address:{
          type:String,
          default:''
        }
      },
      data() {
          return {
            visible: this.showdialog,
            activeName: 'first',
            commentCount: '',
            commentCountMessage: '',
            discussCommentInit: ''
          }
      },
      mounted() {
        if(this.online){
          this.activeName = 'online'
        }
      },
      methods: {
        ...mapMutations(["updateProductCode"]),
        ...mapActions(["obtainCustomerConcern", "obtainCommentCount","obtainDiscussCareRank"]),
        handleClick(tab, event) {
          // this.productCode = "55A3U"
          switch (this.activeName){
            case "fourth":
                // this.updateProductCode(this.productCode)
                // this.obtainCommentCount({productCode: this.productCode})
                // this.obtainCustomerConcern({productCode:this.productCode, sentimentType: 'all'})
                // this.obtainDiscussCareRank(this.productCode)
                break;
          }
        }
      },
      watch: {
        showdialog(){
          this.visible = this.showdialog
        },
        channelId(){
          if(this.online){
            this.activeName = 'online'
          }else {
            this.activeName = 'first'

          }
        }
      }
  }
</script>

<style scoped>
.channelCover{

}

</style>
